<script setup lang="ts">
import TnIcon from '@tuniao/tnui-vue3-uniapp/components/icon/src/icon.vue'
import TnPrivacyPopupBox from 'tnuiv3p-tn-privacy-popup-box/index.vue'
import {ref} from "vue";
const props = defineProps({
  title: {
    type: String,
    default: '',
  },
  icon: {
    type: String,
    default: '',
  },
  url: {
    type: String,
    default: '',
  }
})

/**
 * 跳转页面
 */
const toPage = (url: string): void => {
  if(!url) {
    // showModal.value = true;
    return;
  }
  uni.navigateTo({
    url,
  })
}

const showModal = ref(false);
const handleConfirm = () => {

}
const handleCancel = () => {

}
</script>

<template>
  <view class="msg-card">
    <view class="msg-card__content" @click="toPage(props.url)">
      <view class="msg-card__title"><TnIcon class="bell" size="50" :name="props.icon" offset-top="10" /></view>
      <view class="msg-card__desc" style="font-size: 12px; margin-left: 2px">{{props.title}}</view>
    </view>
    <TnPrivacyPopupBox v-model="showModal"></TnPrivacyPopupBox>
  </view>
</template>


<style scoped lang="scss">
.msg-card {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 16rpx;
  background-color: #fff;
  box-shadow: 2px 4rpx 12rpx rgba(0, 0, 0, 0.1);
  margin-left: 10px;
  position: relative;
  margin-bottom: 10px;
  padding: 3px;

  &__icon {
    width: 60rpx;
    height: 60rpx;
    margin-right: 20rpx;
    display: flex;
    align-items: center;
    justify-content: center;

    image {
      width: 100%;
      height: 100%;
    }
  }

  &__content {
    flex: 1;
    display: flex;
    justify-content: center;

    &__title {
      font-size: 30rpx;
      font-weight: 600;
      color: #222;
    }

    &__desc {
      font-size: 24rpx;
      color: #999;
      margin-top: 6rpx;
    }
  }

  &__arrow {
    width: 28rpx;
    height: 28rpx;
    margin-left: 16rpx;
    image {
      width: 100%;
      height: 100%;
    }
  }
}
.bell {
  display: inline-block;
  transform-origin: top center; /* 关键：设置旋转基点 */
  animation: bell-shake 1.5s ease-in-out infinite;
}

@keyframes bell-shake {
  0%   { transform: rotate(0deg); }
  15%  { transform: rotate(15deg); }
  30%  { transform: rotate(-15deg); }
  45%  { transform: rotate(10deg); }
  60%  { transform: rotate(-10deg); }
  75%  { transform: rotate(5deg); }
  100% { transform: rotate(0deg); }
}

</style>